<template>
  <section class="xmv-message-box xmv-wrap">
    <h4>actionSheet</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
       <button type="button" class="c-button" @click="open('actionSheet')">Button</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltxm-actionSheet 
  ref="actionSheet" 
  v-model="value" 
  :slots="slots" 
  @selconfirm="actionSheethandleChange" 
&gt&lt/xm-actionSheet&gt

export default {
  data() {
    return {
      value: '',
      slots: [
        {
          flex: 1,
          values: [
            "身份证",
            "户口本",
            "护照",
            "军官证",
            "驾驶执照",
            "返乡证",
            "港澳身份证",
            "外国人永久居留身份证",
            "组织机构代码证",
            "其他"
          ]
        }
      ],
    }
  },
  methods: {
    open(picker) {
      this.$refs[picker].open();
    },

    actionSheethandleChange(value) {
      this.$toast({
        message: "已选择 " + value.toString(),
        position: "bottom"
      });
    },
  },
}
        </code>
      </pre>
    </div>
    <xm-actionSheet 
      ref="actionSheet" 
      v-model="value" 
      :slots="slots" 
      @selconfirm="actionSheethandleChange" 
    ></xm-actionSheet>
  </section>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      slots: [
        {
          flex: 1,
          values: [
            "身份证",
            "户口本",
            "护照",
            "军官证",
            "驾驶执照",
            "返乡证",
            "港澳身份证",
            "外国人永久居留身份证",
            "组织机构代码证",
            "其他"
          ]
        }
      ],
    }
  },
  methods: {
    open(picker) {
      this.$refs[picker].open();
    },

    actionSheethandleChange(value) {
      this.$toast({
        message: "已选择 " + value.toString(),
        position: "bottom"
      });
    },
  },
}
</script>

<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>